<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/7/15
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>添加用户信息</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./static/css/bootstrap.min.css" >

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="./static/css/bootstrap-theme.min.css">
    <script src="./static/js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./static/js/bootstrap.min.js" ></script>
    <style>
        .head-img{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="mt-5">添加用户信息</h2>
    <form action="user?request_type=add" method="post" class="mt-4">
        <div class="form-group">
            <label for="user_name">用户名:</label>
            <input type="text" class="form-control" id="user_name"  required name="user_name" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="nick_name">昵称:</label>
            <input type="text" class="form-control" id="nick_name" required name="nick_name" placeholder="请输入用昵称">
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="text" class="form-control" id="password" required name="password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label >性别:</label>
            <input type="radio"  value="0"  name="sex" checked >男
            <input type="radio"  value="1"  name="sex" >女
        </div>

        <div class="form-group">
            <label for="type">用户类型:</label>
           <select id="type" name="type">
               <option value="1">普通用户</option>
               <option value="2">管理员</option>
           </select>
        </div>
        <div class="form-group">
            <label for="signature">个性签名</label>
            <textarea class="form-control" id="signature" name="signature" ></textarea>
        </div>
        <div class="form-group">
            <label>请选择你的头像：</label>
            <div>
                <input type="file" class="form-control brandPic"  id="brandPic">
                <input type="hidden" id="head_image" name="head_image" >
                <input type="hidden" id="head_image_thumb" name="head_image_thumb" >
                </input>
                <img class="head-img">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">添加</button>
    </form>
</div>
</body>
<script>
    $('#brandPic').on('change', function() {
        // 如果没有选择图片 直接退出
        if (this.files.length <= 0) {
            return false;
        }

        // 获取文件对象
        var file = this.files[0];

        // 检查文件类型是否为图片
        var allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
        if (!allowedTypes.includes(file.type)) {
            alert('仅允许上传 JPEG, PNG 或 GIF 图片！');
            return false;
        }

        // 检查文件大小，例如限制为 2MB
        var maxSize = 2 * 1024 * 1024; // 2MB
        if (file.size > maxSize) {
            alert('文件大小不能超过 2MB！');
            return false;
        }

        // 如果文件类型和大小都满足条件，则继续上传
        var formData = new FormData();
        formData.append('file', file);

        $.ajax({
            url: 'upload',
            type: 'post',
            data: formData,
            cache: false, //上传文件不需要缓存
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function(data) {
                // 设置图片预览功能
                $('.head-img').attr('src', data);
                console.log(data)
                $('#head_image').val(data);
                $('#head_image_thumb').val(data);
            }
        });
    });

</script>
</html>
